<template>
    <!-- 图表容器 -->
    <div ref="chartRef" style="width: 100%; height: 400px;"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

type EChartsOption = echarts.EChartsOption;

// 创建一个ref来引用图表容器
const chartRef = ref<HTMLDivElement | null>(null);

onMounted(() => {
    if (chartRef.value) {
        // 获取图表容器
        const chartDom = chartRef.value;
        const myChart = echarts.init(chartDom);

        const option: EChartsOption = {
            title: {
                text: '部门汇款占比',
                left: 'left',  // 设置标题在左侧
                top: 'top',    // 设置标题在顶部
                textStyle: {
                    color: '#2c3e50', // 修改标题颜色
                    fontSize: 18,     // 标题字体大小
                },
                subtextStyle: {
                    color: '#7f8c8d', // 修改副标题颜色
                },
            },
            tooltip: {
                trigger: 'item',
            },
            legend: {
                orient: 'horizontal', // 水平排列图例
                left: 'center',       // 图例居中
                bottom: '0%',         // 图例位于底部
                itemWidth: 10,        // 图例项的宽度
                itemHeight: 10,       // 图例项的高度
                textStyle: {
                    color: '#34495e', // 修改图例文字颜色
                },
            },
            color: ['#fae8e8', '#c9161b', '#830306', '#000'], // 自定义扇形图的颜色
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 27.59, name: '销售一组' },
                        { value: 21.84, name: '销售二组' },
                        { value: 36.78, name: '渠道一组' },
                        { value: 13.79, name: '渠道二组' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                        },
                    },
                    label: {
                        formatter: '{b}: {d}%', // 显示名称和百分比
                        fontSize: 14, // 字体大小
                        color: '#34495e', // 修改标签文字颜色
                    },
                },
            ],
        };

        // 设置图表的配置项
        myChart.setOption(option);
    }
});
</script>

<style scoped>
/* 样式可以根据需求进行调整 */
#chartRef {
    width: 100%;
    height: 400px;
    /* 根据需要调整高度 */
}
</style>
